<template>
<p>基础的表格展示用法。</p>
<p>当 <code>el-table</code> 元素中注入 <code>data</code> 对象数组后，在 <code>el-table-column</code> 中用 <code>prop</code> 属性来对应对象中的键名即可填入数据，用 <code>label</code> 属性来定义表格的列名。 可以使用 <code>width</code> 属性来定义列宽。</p>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>